<template>
   <div class="topic-box">
        
         <dl v-for="item in topicArr" :key="item.id">
             <dt><img v-lazy="item.scene_pic_url"></dt>
            <dd>
               <p>{{item.title}}</p>
               <p>{{item.subtitle}}</p>
               <p><span> {{item.price_info | setColor}}</span></p>
            </dd>
         </dl>
         <!-- 分页 -->
   <van-pagination v-model="currentPage" :page-count="total" mode="simple"
   @change="changeFn" />

   </div>
</template>

<script>

import { getTopicList} from "@/utils/https.js"
export default {
    data(){
       return {
         topicArr:[],
         currentPage:1,
         total:1,
         size:10
       }
    },
     created(){
               //默认加载页面 
               this.getData()
               },
      methods:{

         getData(){
             getTopicList({page:this.currentPage,size:this.size}).then((res)=>{
                  console.log(res)
                   this.topicArr=res.data.data
                   this.total=res.data.totalPages
               }) 
         },
          //切换页码的时候触发
         changeFn(val){
            this.currentPage=val
           this.getData()
         }
      }
}
</script>

<style lang="less">
.topic-box{padding-bottom:100PX;}
   dl{width: 100%;
    img{width: 100%;}
     p{line-height: 30PX;
       font-size: 16PX;
       span{color:red}
      }
     }

</style>